<template>
  <el-drawer
    :title="title"
    :model-value="state.dialogFormVisible"
    :before-close="handleClose"
    size="40%"
    direction="rtl"
    :destroy-on-close="true"
  >
    <template #default>
      <el-descriptions :column="2" :border="true">
        <el-descriptions-item
          :label="t('account.name')"
          label-align="right"
          :span="2"
          >{{ formView.name }}</el-descriptions-item
        >
        <el-descriptions-item
          :label="t('account.gender')"
          label-align="right"
          :span="2"
        >
          <el-tag size="small" v-if="formView.gender == 1">
            {{ t("account.genderFemale") }}</el-tag
          >
          <el-tag size="small" v-if="formView.gender == 0">
            {{ t("account.genderMale") }}</el-tag
          >
          <el-tag size="small" v-if="formView.gender == 2">
            {{ t("account.genderUnknown") }}</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('account.account')"
          label-align="right"
          :span="2"
          >{{ formView.account }}</el-descriptions-item
        >
        <el-descriptions-item
          :label="t('account.employeeNumber')"
          label-align="right"
          :span="2"
        >
          <el-tag size="small"> {{ formView.employeeNumber }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="t('account.email')" label-align="right">
          {{ formView.email }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('account.mobile')" label-align="right">
          {{ formView.mobile }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('account.orgName')" label-align="right">
          {{ formView.orgName }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('account.deptName')"
          label-align="right"
        >
          {{ formView.deptName }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('account.status')"
          label-align="right"
          :span="2"
        >
          <el-tag size="small" v-if="formView.status == 1">
            {{ t("account.statusUnlock") }}</el-tag
          >
          <el-tag size="small" v-if="formView.status == 0" type="danger">
            {{ t("account.statusLocked") }}</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('account.description')"
          label-align="right"
          :span="2"
        >
          {{ formView.description }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import utils from "../../../utils/utils";
import apiAccount from "../api/account";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });
// ts 语法，有默认值版本
const props = withDefaults(
  defineProps<{
    title?: string;
    visible: boolean;
  }>(),
  {
    visible: false,
  }
);

const state = reactive({
  dialogFormVisible: false,
});

const formViewOriginal = () => {
  return {
    accountId: "",
    account: "",
    name: "",
    gender: 2,
    employeeNumber: "",
    orgName: "",
    orgCode: "",
    deptName: "",
    deptCode: "",
    status: 1,
    email: "",
    mobile: "",
    description: "",
    password: "",
    password1: "",
    password2: "",
  };
};

const formView = reactive(formViewOriginal());

const emit = defineEmits<{
  (event: "on-close", result: boolean): void;
}>();

const handleClose = (submit: boolean) => {
  // console.log(submit);
  state.dialogFormVisible = false;
  if (submit == true) {
    // 点击确定按钮关闭
    emit("on-close", true);
  }
};

const show = (row: any) => {
  // console.log(row);
  Object.assign(formView, formViewOriginal());

  apiAccount
    .getAccount(row.accountId)
    .then((response: any) => {
      if (response.data.code == 200) {
        Object.assign(formView, response.data.data);

        apiAccount
          .getAccountExtension(row.accountId)
          .then((response: any) => {
            if (response.data.code == 200) {
              Object.assign(formView, response.data.data);
            }
          })
          .catch((err: any) => {
            utils.errorNotification(t("common.submitException"), err);
          });
      }
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });

  state.dialogFormVisible = true;
};

defineExpose({
  show,
});
</script>
